<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        *{
            margin: 0 auto;
            padding: 0 auto;
        }
        div{
            margin: 0 auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div>
    <canvas width="600" height="600" id="can">您的浏览器版本太低，不支持画布，请升级您的浏览器</canvas>
</div>
<script type="text/javascript">
    function huabu(){
        var box=document.getElementById("can");
        var pen=box.getContext("2d");
        pen.clearRect(0,0,can.width,can.height);
        for(var i=30;i<=30;i-=2) {
            var a = Math.floor(Math.random() * 256);
            var b = Math.floor(Math.random() * 256);
            var c = Math.floor(Math.random() * 256);
            pen.beginPath();
            pen.strokeStyle = "red";
            pen.arc(300, 300, i * 10, 0, Math.PI * 2, true);
            pen.fillStyle = "rgb(" + a + "," + b + "," + c + ")";
            pen.fill();
            pen.closePath();
            pen.stroke();
        }
    }
    window.setInterval(huabu,30);
</script>
</body>